.goods-detail{
  background: var(--page-bg);
  padding-bottom: 120px;

  .detail-nav-bar{
    position: fixed;
    left: 16px;
    z-index: 100;
    font-size: 50px;
  }
  .detail-swiper{
    position: relative;
    .goods-images {
      width: 100vw;
      height: 750px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .inner {
        width: 100%;
        height: 100%;
      }
    }
    
    .swiper-dots{
      position: absolute;
      right: 32px;
      bottom: 32px;
      padding: 4px 16px;
      font-size: 24px;
      color: #fff;
      border-radius: 100px;
      background: rgba(0,0,0,.25);
    }
  }  // detail-swiper end
  
  .detail-summary {
    background: #fff;
    padding: 12px 30px 24px 24px;
    box-sizing: border-box;
    position: relative;
    .priceLine {
      display: flex;
      justify-content: space-between;
      color: #F65F25;
      &.hidden {
        display: none;
      }
      .price {
        display: flex;
        align-items: baseline;
        height: 100%;
        font-weight: 700;
        .zUnit {
          font-size: 32px;
        }
        .zNum {
          font-size: 48px;
        }
        .price-del{
          text-decoration: line-through;
          font-size: 32px;
          color: #66686A;
          margin-left: 8px;
          font-weight: 400;
        }
      }
    }

    .name {
      margin-top: 24px;
      min-height: 44px;
      font-size: 32px;
      font-weight: 700;
      color: #26282A;
      line-height: 44px;
    }

    .summary-tags{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 20px 0;
      .tags-span{
        font-size: 24px;
        margin-right: 16px;
        padding: 4px 8px;
        color: #F65F25;
        background: rgba(246, 95, 37, 0.1);
        &:last-child{
          margin-right: 0
        }
      }
    }
    .summary-ticket{
      padding: 16px;
      position: relative;
      background: linear-gradient(90deg, #F89539 -18.75%, #F65F25 87.08%);
      border-radius: 16px;
      overflow: hidden;
      .ticket-info{
        background: url('../../images/home/detail-ticket-bg.svg') no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        line-height: 76px;
        .info-icon{
          margin: 0 30px;
        }
        .info-title{
          font-size: 28px;
          color: #F65F25;
          font-weight: 700;
          padding: 0 17px;
        }
      }
      .ticket-button{
        background: url('../../images/home/detail-button.svg') no-repeat;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 176px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
      }
    } // summary-ticket end

    .summary-ling{
      position: absolute;
      right: 0;
      top: 100px;
      width: 144px;
      line-height: 42px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 42px 0 0 42px;
      font-size: 24px;
      background: #F65F25;
    }

    .desc {
      margin-top: 10px;
      font-size: 28px;
      color: #66686A;
      line-height: 33px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  } // .detail-summary end

  .detail-purchase{
    margin: 16px 0;
    background: #fff;
    padding: 0 32px;
    .purchase-list{
      display: flex;
      align-items: center;
      font-size: 28px;
      line-height: 104px;
      color: #96989A;
      white-space: nowrap;
      .list-txt{
        color: #26282A;
        margin-left: 32px;
        margin-right: auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }  ///  detail-purchase :end

  .detail-evaluate{
    margin: 16px 0;
    padding: 32px;
    .evaluate-title{
      display: flex;
      justify-content: space-between;
      color: #26282A;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 32px;
      .title-span{
        font-weight: 400;
        font-size: 24px;
        color: #96989A;
      }
    }

    .evaluate-list{
      .list-item{
        .item-header{
          display: flex;
          align-items: center;
          .header-img{
            width: 56px;
            height: 56px;
            display: block;
            margin-right: 16px;
            border-radius: 50%;
          }
          .header-title{
            font-size: 24px;
            color: #96989A;
            .h2{
              color: #26282A;
              font-size: 28px;
              font-weight: 700;
            }
          }
        }
        .item-info{
          color: #26282A;
          font-size: 28px;
          .info-imgs{
            display: flex;
            align-items: center;
            .imgs-img{
              width: 128px;
              height: 128px;
              display: block;
              margin-right: 16px;
              border-radius: 16px;
            }
          }
        }
      }
    }
  } //  detail-evaluate :end

  
  .goods-html {
    width: 100vw;
    background: #fff;
    .detail-title{
      font-size: 24px;
      color: #66686A;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f5f5;
      line-height: 50px;
      padding-bottom: 16px;
      &::before,&::after{
        display: block;
        content: '';
        width: 60px;
        height: 1px;
        background: #C6C8CA;
      }
      &::before{
        margin-right: 10px;
      }
      &::after{
        margin-left: 10px;
      }
    }
    .detail {
      width: 100%;
      min-height: 300px;
      font-size: 24px;
      color: #333333;
      line-height: initial;

      img,
      image {
        display: block;
        width: 100%;
      }
    }
  }
  
  .priceAppend {
    background: #ffffff;
    padding: 32px;
    margin-top: 16px;
    box-sizing: border-box;
    .lableLine {
      font-size: 28px;
      color: #66686A;
      margin-bottom: 16px;
    }
    .txtLine{
      font-size: 24px;
      color: #96989A;
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      .txt-left{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #F65F25;
        margin-top: 13px;
      }
      .txt-info{
        flex: 1;
        padding-left: 22px;
        .info-h2{
          font-weight: 700;
          color: #66686A;
          margin-bottom: 8px;
        }
        .info-p{
          line-height: 34px;
        }
      }
    }
  }

  .detail-goods{
    margin: 16px 0;
    padding: 24px;
    .goods-title{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #F65F25;
      margin-bottom: 16px;
      line-height: 50px;
    }
    .goods-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .list-item{
        width: 344px;
        border-radius: 32px;
        margin-bottom: 16px;
        background: #fff;
        overflow: hidden;
        .item-img{
          width: 344px;
          height: 344px;
        }
        .item-h2{
          font-size: 28px;
          color: #26282A;
        }
        .item-price{
          font-size: 28px;
          color: #F65F25;
          margin-top: 16px;
        }
      }
    }
  }

  .detail-footer{
    position: fixed;
    bottom: 0;
    padding:32px;
    right: 0;
    left: 0;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0px -3px 8px 0px rgba(0,0,0,.15);
    .footer-box{
      display: flex;
      align-items: center;
      .box-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 32px;
        font-size: 20px;
        color: #26282A;
      }
    }
    .footer-button{
      display: flex;
      flex: 1;
      height: 88px;
      border: 1px solid #F65F25;
      border-radius: 32px;
      overflow: hidden;
      text-align: center;
      .button{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 50%;
        font-size: 28px;
        line-height: 1;
      }
      .left{
        color: #F65F25;
      }
      .right{
        background: #F65F25;
        color: #fff;
      }
    }
  }

}